<template>
  <div class="search_shop">
    <!-- 搜索栏 -->
    <SearchShop :keyword="keyword"></SearchShop>
    <div class="head_tab flex">
      <div style="color: red;">综合</div>
      <div class="price_bg">
        价格
        <div class="bg_img"></div>
      </div>
      <div @click="showSropdownBox">分类</div>
      <div class="classify_dropdown_box" v-show="dropdownBoxShow">
        <van-grid :gutter="10" :column-num="3">
          <van-grid-item v-for="value in currentSearchData?.categoryL1List" :key="value.id" :text="value.name"
            @click="clickCategoryHandler(value.id)" :class="(currentId == value.id) ? 'active' : ''" />
        </van-grid>
      </div>
      <div class="mask_box" @click="clickMaskBox" v-show="dropdownBoxShow">
      </div>
    </div>

    <div class="goods_list_container flex">
      <HomeGoodsItem v-for="item in directlyList" :goodsDetail="item" :key="item.id"></HomeGoodsItem>
    </div>
  </div>
</template>

<script setup lang="ts">
import SearchShop from '@/components/Search-shop/index.vue'
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router'
import searchApi, { type directlyModel, type ThisSearchDataModel } from '@/api/search';

const route = useRoute();
const keyword = ref(route.query.keyword as string)
const directlyList = ref<directlyModel[]>([])
const dropdownBoxShow = ref(false)
const currentSearchData = ref<ThisSearchDataModel>()
const currentId = ref('0')
/* 生命周期钩子函数 */
let hisArr = ref<string[]>([])
onMounted(() => {
  getSearchData()
  if (localStorage.getItem('history')) {
    hisArr.value = JSON.parse(localStorage.getItem('history')!)
  }
})

watch(() => route.query.keyword, (nval) => {
  if (localStorage.getItem('history')) {
    hisArr.value = JSON.parse(localStorage.getItem('history')!)
  }
  if (!hisArr.value.includes(nval as string)) {
    hisArr.value.unshift(nval as string)
    if (hisArr.value.length > 10) {
      hisArr.value.pop()
    }
    localStorage.setItem('history', JSON.stringify(hisArr.value))
  }
  keyword.value = nval as string

  getSearchData()
}, { immediate: true, deep: true })

/* 自定义的回调事件 */
// 点击分类下的类别的回调
function clickCategoryHandler(id: string) {
  currentId.value = id
}
// 点击分类的回调
function showSropdownBox() {
  dropdownBoxShow.value = !dropdownBoxShow.value
}
// 点击蒙版层的回调
function clickMaskBox() {
  dropdownBoxShow.value = !dropdownBoxShow.value
}
/* 发送请求的功能函数 */
async function getSearchData() {
  try {
    let result = await searchApi.reqGetSearchData(keyword.value)
    directlyList.value = result.directlyList
    currentSearchData.value = result
    console.log(result)
  } catch (error) {
  }
}


</script>

<style scoped lang="less">
.search_shop {
  .head_tab {
    height: 40px;
    justify-content: space-around;
    font-size: 14px;
    background: #FAFAFA;
    border-bottom: 1px solid #D9D9D9;

    &>div {
      text-align: center;
      line-height: 40px;
    }

    .price_bg {
      position: relative;

      .bg_img {
        position: absolute;
        width: 8px;
        height: 11px;
        top: 15px;
        right: -12px;
        background-image: url('@/assets/searchIcon.png');
        background-position: 0 -108px;
        background-size: 200px;
      }
    }

    .classify_dropdown_box {
      height: 150px;
      position: fixed;
      background: #FFFFFF;
      z-index: 2;
      top: 84px;
      width: 100%;

      .van-grid-item {
        margin-top: 5px;
      }

      /deep/ .van-grid-item.active>.van-grid-item__content>.van-grid-item__text {
        color: red;
      }

      /deep/ .van-grid-item__content {
        padding: 10px 0;
      }
    }

    .mask_box {
      height: 100%;
      position: fixed;
      background: #333;
      opacity: .5;
      z-index: 1;
      top: 234px;
      width: 100%;
    }
  }



  .goods_list_container {
    padding-top: 10px;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}
</style>
